关于标题中两个属性的基本用法本文不再介绍，具体可以参阅如下两篇文章：

（1）.align-items属性可以参阅CSS align-items 属性一章节。

（2）.align-content属性可以参阅CSS align-content 属性一章节。

两个属性的功能极为相似，甚至在有些时候两者的表现完全一样，具有很强的迷惑性：

（1）.两个属性都可以用于设置项目在交叉轴上的对齐方式。

（2）.存在相同的属性值，并且这些属性值在某些时候表现完全相同。

网络上有不少的优秀的文章对两个属性的区别进行了分析，给出的结论基本是一致的。

那就是align-content用于多行容器元素，对于单行容器元素无效，结论确实如此，不过大多没有涉及其中的原理。

本文再结合代码实例从原理方面对两个属性的区别进行一下详细分析，希望能够给需要的朋友带来一定的帮助。

一.多行容器与单行容器：

弹性容器可以划分为多行容器和单行容器，划分方式如下：

（1）.容器的flex-wrap属性值为wrap或者wrap-reverse的容器是多行容器。

（2）.只要进行上述属性设置，即便容器中只有一个行项目，也是多行容器。

（3）.多行容器中，每一行在交叉轴方向上的尺寸，恰好能够包裹住项目。

（4）.当行容器中，只有一个行，此行在交叉轴上的尺寸等同于容器在交叉轴上的尺寸。

多行容器行高图示如下：

单行容器行高图示如下：

上面图示已经很清晰的说明了两类容器中的行高，不再进一步说明。

二.区别原理分析：

（1）.align-items属性规定的是项目在交叉轴方向行中的对齐方式。

（2）.align-content属性规定的是项目所在行在交叉轴方向上的对齐方式。

上面这两条阐述可能过于简略了，很多朋友看了不太容易理解，下面再通过代码实例进行分析。

三.代码实例如下：

代码运行效果截图如下：

代码分析如下：

（1）.灰色容器元素采用弹性布局，但是并没有设置换行。

（2）.也就是说此弹性容器是一个单行容器，也就意味着唯一的行高等同于容器在交叉轴上的尺寸。

（3）.align-content属性是用来设置行在容器交叉轴上的对齐方式，既然行高等同于容器交叉轴上的尺寸。

（4）.那么也就无所谓居中操作了，项目也就只能在行的顶端排列了。

这也印证了网络上众多文章的一个结论，那就是align-content属性对单行容器无效。

代码运行效果截图如下：

代码分析如下：

（1）.外部灰色元素采用弹性布局，并将flex-flow属性值设置为row wrap。

（2）.这意味着灰色弹性容器是一个多行容器，每一个行高等同于当前行中项目在交叉轴上的尺寸。

（3）.align-content属性用来设置行在交叉轴上的对齐方式，于是此属性值设置为center。

（4）.也就意味着将两个行在交叉轴上居中对齐，所以视觉上实现了项目居中对齐。

代码运行效果截图如下：

代码分析如下：

（1）.首先强调一点，网络上不少文章说align-items针对单行容器，这是错误的，此属性是全能的。

（2）.此代码与上一个例子的代码唯一区别是将align-content属性修改为align-items，渲染效果有很大差别。

（3）.虽然没有设置align-content属性，但是它的默认值是stretch，那么行在交叉轴方向上的尺寸会扩展以适应容器尺寸。

（4）.所以两个行平分容器元素在交叉轴上的空间。

（5）.又因为align-items规定的是项目在行中的对齐方式，所以align-items: center是设置项目在两个行中居中。

上面的几个例子足够演示两个属性的实质区别在哪，下面再进行最后的总结：

（1）.align-items属性是设置项目在所在行交叉轴方位的对齐方式。

（2）.align-content属性是设置行在容器交叉轴方位的对齐方式。

掌握了两个属性的实质，那么对于两个属性的区别自然就清晰起来，对于两个属性的应用也会得心应手。

上一篇：align-items:baseline 作用_CSS3实例

flex-basis与width区别_CSS3实例：下一篇